<template>
  <div class="quick-navigation-list">
    <a-spin :loading="loading" style="width: 100%">
      <div
        class="inline-block quick-navigation-item"
        :class="[activeNavigation == navigation.prop ? 'active' : '', navigation.theme]"
        v-for="navigation in quickNavigationList"
        :key="navigation.label"
        @click="navigationClickFn(navigation)"
      >
        <div class="flex items-center quick-navigation-item-label">
          {{ navigation.label }}
          <SvgIcon v-if="navigation.icon" :name="navigation.icon" class="navigation-icon" />
          <!-- 车辆冲突tooltip -->
          <a-tooltip v-if="navigation.prop == 'noHandleNoPay'" content="取违章状态为未处理，费用状态为无需收款、未收款的违章订单">
            <icon-question-circle class="navigation-icon" />
          </a-tooltip>
        </div>
        <div class="quick-navigation-item-value">{{ navigation.num }}</div>
        <div class="active-border"></div>
      </div>
    </a-spin>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { getViolationCount } from '@/api/asset/carViolation'

  const emit = defineEmits(['change'])
  // 快捷导航选中
  let activeNavigation = ref('')
  // 快捷导航
  const quickNavigationList = ref([
    { label: '超过7天未处理', theme: 'red', prop: 'exceed7Day', num: 0 },
    { label: '未处理未收款', theme: 'blue', prop: 'noHandleNoPay', num: 0 },
    { label: '已处理未收款', theme: 'blue', prop: 'onHandleNoPay', num: 0 },
    { label: '超过15天未处理', theme: 'blue', prop: 'exceed15Day', num: 0 },
    { label: '不配合处理', theme: 'blue', prop: 'lesseeNoJoin', num: 0 },
    { label: '未处理已收款', theme: 'blue', prop: 'noHandleOnPay', num: 0 },
  ])

  const loading = ref(true)
  const getStNum = () => {
    loading.value = true
    getViolationCount()
      .then(({ result }) => {
        if (result) {
          quickNavigationList.value.forEach((navigation) => {
            let prop = navigation.prop
            if (prop) {
              navigation.num = result[prop] || 0
            }
          })
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  const navigationClickFn = ({ label, prop }) => {
    activeNavigation.value = prop
    let param = {}
    switch (label) {
      case '超过7天未处理':
        param = {
          handlePayStatus: 4,
          eventStatusList: [0], // 未处理
          violationFeeStateList: [1, 2], // 无需收款&未收款
        }
        break
      case '未处理未收款':
        param = {
          handlePayStatus: 0,
          eventStatusList: [0], // 未处理
          violationFeeStateList: [1, 2], // 无需收款&未收款
        }
        break
      case '已处理未收款':
        param = {
          handlePayStatus: 1,
          eventStatusList: [1], // 已处理
          violationFeeStateList: [2], // 未收款
        }
        break
      case '超过15天未处理':
        param = {
          handlePayStatus: 5,
          eventStatusList: [0], // 未处理
          violationFeeStateList: [1, 2], // 无需收款&未收款
        }
        break
      case '不配合处理':
        param = {
          handlePayStatus: 3,
        }
        break
      case '未处理已收款':
        param = {
          handlePayStatus: 2,
          eventStatusList: [0], // 未处理
          violationFeeStateList: [3], // 已收款
        }
        break
    }
    emit('change', param)
  }

  const reset = () => {
    activeNavigation.value = ''
  }
  const clickActive = (item) => {
    activeNavigation.value = item
  }
  const clickActiveByLabel = (label) => {
    const labelOption = quickNavigationList.value.find((item) => item.label === label)
    if (labelOption) {
      navigationClickFn(labelOption)
    }
  }
  // onMounted(() => {
  //   getStNum()
  // })

  defineExpose({
    reset,
    clickActive,
    clickActiveByLabel,
    getStNum,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-navigation-item {
      height: 62px;
      border-radius: 2px;
      padding: 9px 0 9px 16px;
      margin-right: 20px;
      margin-bottom: 20px;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      &:hover {
        transform: scale(1.1);
        transition: transform 0.3s;
        z-index: 999;
      }
      @media screen and (min-width: 1000px) {
        width: calc(100% / 7 - 17.2px);
        &:nth-of-type(6n) {
          margin-right: 20px;
        }
        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }
      @media screen and (min-width: 1440px) {
        width: calc(100% / 8 - 17.5px);
        &:nth-of-type(7n) {
          margin-right: 20px;
        }
        &:nth-of-type(8n) {
          margin-right: 0;
        }
      }
      .quick-navigation-item-label {
        font-size: 12px;
        line-height: 17px;
      }
      .quick-navigation-item-value {
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: 600;
      }
      .active-border {
        height: 6px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        display: none;
        border-radius: 0 0 2px 2px;
      }
    }
    .quick-navigation-item.blue {
      background-color: #95b4fcff;
      .active-border {
        background-color: #5786f3ff;
      }
    }
    .quick-navigation-item.red {
      background-color: #f76964ff;
      .active-border {
        background-color: #e23838ff;
      }
    }
    .quick-navigation-item.yellow {
      background-color: #fab855ff;
      .active-border {
        background-color: #f79a29ff;
      }
    }
    .quick-navigation-item.green {
      background-color: #70d6a1ff;
      .active-border {
        background-color: #33b571ff;
      }
    }
    .quick-navigation-item.active {
      box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
      .active-border {
        display: block;
      }
    }
  }
  .navigation-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
</style>
